<template>
    <div>
        <div>
            <span style="font-size: 14px; color: #606266;" v-if="label">{{ label }}</span>
            <el-link class="outputbutton" type="info" @click="check() && (chooseSize=true)">PNG</el-link>
            <el-link class="outputbutton" type="info" @click="check() && output('svg')">SVG</el-link>
        </div>
        <el-dialog title="选择分辨率" :visible.sync="chooseSize" width="300px" :append-to-body="true">
            <el-select v-model="imageSize" placeholder="请选择分辨率" style="width: 100%">
                <el-option label="1080P" value="1080P"></el-option>
                <el-option label="2k" value="2k"></el-option>
                <el-option label="4k" value="4k"></el-option>
            </el-select>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="chooseSize = false">取 消</el-button>
                    <el-button type="primary" @click="output('png')">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import exportImage from '@/utils/exportImage.js';

export default {
    name: 'export-image',
    props: {
        el: { //要渲染的dom选择器
            type: String,
            required: true,
        },
        name: { //图片名字
            type: String,
            default: 'default',
        },
        label: { 
            type: String,
            default: '图表导出：'
        },
        valid: { //是否可以导出
            type: Boolean,
            default: true,
        },
        warning: { //不能导出时的警告
            type: String, 
            default: '暂时不能导出'
        },
        //触发前的回调函数，可以修改部分视图
        prepare: {
            type: Function,
            default: () => {},
        },
        //触发后的回调函数，可以修改部分视图
        finish: {
            type: Function,
            default: () => {},
        },
    },
    data() {
        return {
            imageSize: '1080P',
            chooseSize: false,
            loading: null,
        }
    },
    methods: {
        check() {
            if(!this.valid) {
                this.$message({
                    message: this.warning,
                    type: 'warning'
                });
                return false;
            }
            return true;
        },
        output(type = 'png') {
            this.chooseSize = false;
            this.loading = this.$loading({
                lock: true,
                text: '渲染中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const res = this.prepare();
            if (res instanceof Promise) {
                res.then(() => {
                    this.doOutput(type);
                })
            } else {
              this.doOutput(type);
            }

        },
        doOutput(type = 'png') {
            this.$nextTick(() => {
                let scale = this.imageSize;
                if(type === 'svg') scale = 5;
                exportImage({
                    el: this.el,
                    type,
                    scale,
                    name: this.name,
                    success: () => {
                        this.finish(); //触发前的回调函数，可以修改部分视图
                        this.loading.close();
                    }
                })
            });
        },
    }
}
</script>

<style>
.outputbutton{
    padding: 0 5px;
}
</style>